<template>
<el-row class="container">

    <el-col :span="24" style="min-height:60px;height:5%;background-color: #014171;">
        <el-row>
            <el-col :span="10">
                <div class="logo">
                    <el-button type="primary" icon="el-icon-back" @click="showMainPage">&nbsp;&nbsp;{{$t("appointment.returnBtnName")}}&nbsp;&nbsp;</el-button>
                </div>
            </el-col>
            <el-col :span="14">
                <div class="userinfo">
                    <el-button type="primary" icon="el-icon-circle-plus-outline" @click="showAddAppointmentPage">{{$t("appointment.addAppointmentBtnName")}}</el-button>
                </div>
            </el-col>
        </el-row>
    </el-col>

    <el-col :span="24" style="height:95%;margin-top:50px;padding-left:20px;padding-right:20px;">
        <!--列表(查询结果-当前页)-->
        <el-table :data="appointments" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;" :row-style="tableRowStyle" border>
            <el-table-column type="index" :index="indexMethod" :label="$t('appointment.table.xuhaoColumnName')" width="110">
            </el-table-column>
            <el-table-column prop="time" :label="$t('appointment.table.timeColumnName')" min-width="200" sortable>
                <template scope="scope">
                    <el-icon name="time"></el-icon>
                    <span style="margin-left: 10px">{{ scope.row.time }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="staffName" :label="$t('appointment.table.staffColumnName')" min-width="200" sortable>
            </el-table-column>
            <el-table-column prop="clientSurname" :label="$t('appointment.table.clientnameColumnName')" min-width="200">
                <template scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.firstName }} {{ scope.row.familyName }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="clientPhone" :label="$t('appointment.table.clientPhoneColumnName')" min-width="200">
            </el-table-column>
            <el-table-column :label="$t('appointment.table.inshopColumnName')" width="80">
                <template scope="scope">
                    <template v-if="scope.row.checkIn === 0">
                        <el-button type="primary" icon="check" size="small" @click="customerCheckIn(scope.$index, scope.row)">{{$t("appointment.table.inshopColumnName")}}</el-button>
                    </template>
                    <template v-else>
                        {{$t('appointment.table.inshopColumnValTag')}}
                    </template>
                </template>
            </el-table-column>
            <el-table-column :label="$t('appointment.table.editColumnName')" width="80">
                <template scope="scope">
                    <template v-if="scope.row.checkIn === 0">
                        <el-button type="success" icon="edit" size="small" @click="editAppointment(scope.$index, scope.row)">{{$t("appointment.table.editColumnName")}}</el-button>
                    </template>
                </template>
            </el-table-column>
            <el-table-column :label="$t('appointment.table.deleteColumnName')" width="80">
                <template scope="scope">
                    <template v-if="scope.row.checkIn === 0">
                        <el-button type="danger" icon="delete" size="small" @click="delAppointment(scope.$index, scope.row)">{{$t("appointment.table.deleteColumnName")}}</el-button>
                    </template>
                </template>
            </el-table-column>
        </el-table>
        <el-col :span="24" class="toolbar">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" style="float:right;">
            </el-pagination>
        </el-col>
    </el-col>

</el-row>
</template>

<script>
import {
    getShopAppointments,
    checkinAppointment,
    delAppointment
} from '../../api/api';
export default {
    data() {
        return {
            appointments: [],
            total: 0, //列表总条数
            pageSize: 10, //每页条数
            currentPage: 1, //当前页码
            listLoading: false,
            sels: [] //列表选中列
        };
    },
    mounted() {
        this.getAppointments();
    },
    methods: {
        showMainPage() {
            //显示主页面
            this.$router.push({
                path: '/home'
            });
        },
        showAddAppointmentPage() {
            this.$router.push({
                path: '/appointment_add'
            });
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.getAppointments();
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getAppointments();
        },
        selsChange: function (sels) {
            this.sels = sels;
        },
        getAppointments() {
            let para = {
                pageSize: this.pageSize,
                pageNum: this.currentPage
            };
            getShopAppointments(para).then(res => {
                let {
                    msg,
                    code
                } = res;
                if (code !== "0") {
                    this.$message({
                        message: msg,
                        type: 'error'
                    });
                } else {
                    this.total = res.data.total;
                    this.appointments = res.data.list;
                    this.listLoading = false;
                }
            });
        },
        //表格中的【序号】列的值生成方式
        indexMethod(index) {
            return index + 1 + (this.currentPage - 1) * this.pageSize;
        },
        tableRowStyle({
            row,
            rowIndex
        }) {
            //TODO:如果当前行的预约时间跟系统时间对比，如果已经过期了，则背景色为黄色警告颜色
            if (rowIndex === 1) {
                return 'background: #fdf6ec';
            } else if (rowIndex === 3) {
                return 'background: #fdf6ec';
            }
            return '';
        },
        delAppointment(index, row) {
            this.$confirm(this.$t('appointment.delDialog.content'), this.$t('appointment.delDialog.title'), {
                type: 'warning'
            }).then(() => {
                this.listLoading = true;
                let para = {
                    appointmentId: row.id
                };
                delAppointment(para).then((res) => {
                    this.listLoading = false;
                    this.$message({
                        message: this.$t('appointment.delDialog.successMsg'),
                        type: 'success'
                    });
                    this.getAppointments();
                });
            }).catch(() => {

            });
        },
        editAppointment(index, row) {
            this.$router.push({
                name: 'appointment_edit',
                params: {
                    appointmentId: row.id
                }
            });
        },
        customerCheckIn(index, row) {
            this.$confirm(this.$t('appointment.inShopDialog.content'), this.$t('appointment.inShopDialog.title'), {
                type: 'warning'
            }).then(() => {
                this.listLoading = true;
                let para = {
                    appointmentId: row.id
                };
                checkinAppointment(para).then((res) => {
                    this.listLoading = false;
                    this.$message({
                        message: this.$t('appointment.inShopDialog.successMsg'),
                        type: 'success'
                    });
                    this.getAppointments();
                });

            }).catch(() => {

            });
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~scss_vars';

.container {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #012547;
    font-family: Helvetica, Tahoma, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #ffffff;
}

.nav {
    display: flex;
    justify-content: Center;
    align-items: Center;
    font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
    font-size: 48px;
}

.userinfo {
    display: flex;
    justify-content: left;
    align-items: Center;
    text-align: right;
    padding-right: 35px;
    float: right;
    height: 60px;
}

.logo {
    display: flex;
    justify-content: left;
    align-items: Center;
    height: 60px;
    font-size: 26px;
    padding-left: 20px;
    padding-right: 20px;
}
</style>
